<template>
  <div>
    <el-container style="border: 18px solid #eee">
      <el-main>
        <el-row>
          <el-form ref="form" label-position="top" :model="form" label-width="80px">
            <el-form-item label="图片URL(一行一个图片)">
              <el-input v-model="form.urls" type="textarea" :rows="10" :placeholder="输入图片链接多个换行" />
            </el-form-item>
          </el-form>
          <el-button style="float: right" type="primary" @click="handleCreateImage">创建</el-button>
        </el-row>
        <img v-if="url !== ''" :src="url">
        {{ url }}
      </el-main>

    </el-container>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="urls">
          <el-input v-model="form.urls" type="textarea" :rows="5" :placeholder="urls" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateImage">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Image_Combination } from '@/api/eco/image'

export default {
  data() {
    return {
      url: '',
      form: {
        urls: ''
      },
      dialogVisible: false
    }
  },
  methods: {
    handleCreateImage() {
      Image_Combination({ urls: this.form.urls.split('\n') }).then((response) => {
        this.url = response.data['url']
        console.log(this.tableData)
      })
    }
  }

}
</script>

<style scoped>

</style>
